// 获取各容器节点
var home_page = document.querySelector(".home_page");
var gameBtn1 = document.querySelector(".gameBtn1");
var fade = document.querySelector(".fade");
var stepNum = document.querySelector(".count span"); // 步数
var play = document.querySelector(".play");
var row;
var span = document.querySelector("span");
var cardAll = document.querySelectorAll(".card");
var img = document.getElementsByTagName("img");
var game_end = document.querySelector(".game_end");
var clickBtn1 = document.querySelector(".clickBtn1");
var ranking = document.querySelector(".ranking");
var clickBtn2 = document.querySelector(".clickBtn2");
var share = document.querySelector(".share");
var bgPic = share.children[0];
var score1 = document.querySelector(".score1");
var car = document.querySelector(".car");


var arg = [1, 3, 5, 2, 6, 4, 8, 7, 9, 10, 5, 2, 7, 1, 4, 9, 6, 3, 10, 8]; // 图片标识
var hidCardNum = 0; // 记录已对消卡片的数量
var clickTime = 0;
var time = 0;
var btn_flag = true;

// 随机打乱数组位置的方法
function shuffle(arr) {
	var length = arr.length,
		randomIndex,
		temp;
	while (length) {
		randomIndex = Math.floor(Math.random() * (length--));
		temp = arr[randomIndex];
		arr[randomIndex] = arr[length];
		arr[length] = temp;
	}
	return arr;
}

// 页面布局
function init(rowNum, colNum) {
	for (var i = 0; i < rowNum; i++) {
		play.innerHTML += `
            <div class="row">

            </div>`;
	}
	row = document.querySelectorAll(".row"); // 获取行数
	for (var j = 0; j < row.length; j++) {
		for (var z = 0; z < colNum; z++) {
			row[j].innerHTML += `
            <div class="card">
                <div class="front">
                </div>
            </div>`;
		}
	}
	cardAll = document.querySelectorAll(".card");
	arg = shuffle(arg); // 获取随机打乱后的数组
	for (var k = 0; k < cardAll.length; k++) {
		cardAll[k].innerHTML += `
            <div class="back">
                <img src="./images/c${arg[k]}.jpg" alt="" name="${arg[k]}">
            </div>`;
	}
	console.log(arg)
}
init(5, 4);

// 渲染各功能事件
function add_for_each() {
	for (var i = 0; i < cardAll.length; i++) {
		cardAll[i].addEventListener("click", function () {				
			var frontCard = document.querySelectorAll(".frontClick");
			if (btn_flag) {
				// 不存在向前翻转的样式时，添加
				if (this.className.indexOf("frontClick") == -1) {
					if(frontCard.length >= 2 ){
						return;
					}
					// 点击卡片一次记一步
					stepNum.innerText = Number(stepNum.innerText) + 1;
					this.classList.add("frontClick");
					if (frontCard.length == 2) {
						btn_flag = false;
					}

				} 
			}

		})

		// 监听卡片翻转过渡结束后的操作(卡片翻转过去完成后触发一次，翻转回来完成时又是一次触发)
		cardAll[i].addEventListener("transitionend", function () {
			var frontCard = document.querySelectorAll(".frontClick");
			clickTime++;  // 计过渡结束的次数 

			// 控制点击翻转两张卡片就进行一次判断
			if (clickTime % 2 == 0 && frontCard.length == 2) {

				if (frontCard[0].querySelector(".back>img").name == frontCard[1].querySelector(".back>img").name) {
					// 判断为相同卡片时添加消除卡片的样式
					frontCard[0].classList.add("cardHidden");
					frontCard[1].classList.add("cardHidden");
					// 同时移除卡片向正面翻转的样式，方便下次在剩下的卡片中重新开始判断
					frontCard[0].classList.remove("frontClick");
					frontCard[1].classList.remove("frontClick");

					hidCardNum += 2; 
					if (hidCardNum == 20) {
						game_end.classList.add("moveShow1");

						// 将游戏结束得分传到结束页
						if (stepNum.innerText < 10) {
							score1.children[1].innerText = "0" + span.innerText;
						}
						score1.children[1].innerText = stepNum.innerText;
					}
					btn_flag = true;
				} else {
					// 判断为不同卡片时，移除向正面翻转的样式恢复原样
					frontCard[0].classList.remove("frontClick");
					frontCard[1].classList.remove("frontClick");
					btn_flag = true;
				}

				// 重置判断条件
				clickTime = 0;
				console.log(frontCard)
			}
		})

	}
}
add_for_each();


// 主页的经典模式按钮的监听
gameBtn1.children[0].addEventListener("click", function () {
	home_page.classList.add("moveShow3");
	fade.classList.add("moveShow2");
	car.classList.add("carHid");
})
// 游戏结束页的排行榜按钮的监听
clickBtn1.children[0].addEventListener("click", function () {
	ranking.classList.add("moveShow2");
})
// 游戏结束页的再玩一次按钮的监听
clickBtn1.children[1].addEventListener("click", function () {
	game_end.classList.remove("moveShow1");
	home_page.classList.add("moveShow3");
	fade.classList.add("moveShow2");
	play.innerHTML = ""; // 清空原来的布局
	init(5, 4) // 重新布局
	stepNum.innerText = 0; // 重置步数计数
	hidCardNum = 0; // 重置消除的卡片数
	add_for_each(); // 重新渲染各事件
})
// 游戏结束页的分享按钮的监听
clickBtn1.children[2].addEventListener("click", function () {
	share.classList.add("moveShow2");
})
// 排行榜页的主页按钮的监听
clickBtn2.children[0].addEventListener("click", function () {
	home_page.classList.add("moveShow2");
	location.reload();
})
// 排行榜页的再玩一次按钮的监听
clickBtn2.children[1].addEventListener("click", function () {
	ranking.classList.remove("moveShow2");
	game_end.classList.remove("moveShow1");
	fade.classList.add("moveShow2");
	play.innerHTML = ""; // 清空原来的布局
	init(5, 4) // 重新布局
	stepNum.innerText = 0; // 重置步数计数
	hidCardNum = 0; // 重置消除的卡片数
	add_for_each(); // 重新渲染各事件
})
// 分享页监听
bgPic.children[0].addEventListener("click", function () {
	share.classList.remove("moveShow2");
})